<template>
    <div>
        <div class="box1">
            <p>关键字</p>
            <el-input placeholder="客户姓名和电话" v-model="queryParams.name" />
            <p>录入人</p>
            <el-select v-model="data" class="m-2" placeholder="请选择">
                <el-option v-for="item in SelectList" :key="item.userId" :label="item.nickName"
                    :value="item.nickName"></el-option>
            </el-select>
            <p>录入时间</p>
            <div class="block">
                <el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期" :size="size" />
            </div>
            <el-button class="btn" type="primary" :icon="Search" @click="queryCustomerList">搜索</el-button>
            <el-button class="btn" :icon="Refresh" type="primary" plain>重置</el-button>
        </div>
        <div class="box2">
            <!-- <ButtonVal /> -->
            <el-button class="btn1" :icon="Plus" type="primary" plain @click="addshow = true">新增</el-button>
            <el-button class="btn1" :disabled="multiple.length == 1 ? false : true" :icon="EditPen" type="success" plain
                @click="fiex(postid)">修改</el-button>
            <el-button class="btn1" :icon="Download" type="warning" plain @click="exportFn">导出</el-button>
        </div>

        <el-table ref="multipleTableRef" cell-class-name="align" @selection-change="handleSelectionChange"
            style="width: 100%;" :data="customerList">
            <el-table-column type="selection" width="55" />
            <el-table-column label="客户姓名" width="300" prop="name" />
            <el-table-column label="电话" prop="phone" />

            <el-table-column label="性别" prop="sex">
                <template #default="{ row }">
                    {{ row.sex == 0 ? "男" : row.sex == 1 ? "女" : row.sex == 2 ? "女" : row.sex }}
                </template>
            </el-table-column>

            <el-table-column label="录入人" prop="inputUserName" />
            <el-table-column label="录入时间" prop="entryTime" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button plain style="border: 0;color:#1890ff ;"
                        @click="edit(row.id, row.name, row.phone, row.sex)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <ElConfigProvider :locale="zhCn">
        <div class="page">
            <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="queryCustomerList" @current-change="queryCustomerList" />
        </div>
    </ElConfigProvider>
    <EditCustomer :show="showDialog" @hide="closeDialog" :id="editId" :name="editName" :phone="editPhone"
        :sex="editSex" />

    <AddCustomer :show="addshow" @hide="closeAdd" />
</template>
<script setup lang='ts'>
import EditCustomer from './EditCustomer.vue';
import { reactive, ref } from 'vue'
import { ElButton, ElConfigProvider, ElIcon, ElInput, ElMessage, ElMessageBox, ElOption, ElPagination, ElSelect, ElSwitch, ElTable, ElTableColumn } from "element-plus";
import 'dayjs/locale/zh-cn'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { AllCustomerApi, ExportApi, getCustomerApi } from './api';
import AddCustomer from './AddCustomer.vue';
import { Plus, EditPen, Download, Search, Refresh } from '@element-plus/icons-vue';
import { saveAs } from "file-saver";

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]
interface User {
    date: string
    name: string
    address: string
    proId: number
}
const postid = ref(0)
const postids = ref<any>([])
const multiple = ref<User[]>([])
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const handleSelectionChange = (val: User[]) => {
    val.forEach(item => {
        customerList.value.find(sur => sur.id === item.proId)
        postids.value.push(item.proId)
    })
    multiple.value = val
    postid.value = val[0].proId;
    postids.value = val.map(item => item.proId)
}

const fiex = (postid: number) => {

}

const showDialog = ref(false);
const editId = ref(0);
const editPhone = ref<string>();
const editName = ref<string>();
const editSex = ref<string>();
//修改客户资料
const edit = (id: number, name: string, phone: string, sex: string) => {
    showDialog.value = true;
    editId.value = id;
    editName.value = name;
    editPhone.value = phone;
    editSex.value = sex;
    console.log(123);
}

const closeDialog = () => {
    showDialog.value = false;
    editId.value = 0;
    queryCustomerList();
};

const addshow = ref(false);
const closeAdd = () => {
    addshow.value = false;
    queryCustomerList();
}

const queryParams = reactive<ICustomerListParams>({
    name: "",
    pageNum: 1,
    pageSize: 10,
});
const customerList = ref<ICustomerModel[]>([])
const total = ref(0);

const queryCustomerList = () => {
    getCustomerApi(queryParams).then((res) => {
        if (res.code === 200) {
            customerList.value = res.rows;
            total.value = res.total;
        }

    })
}
queryCustomerList();

const queryLuList = reactive<any>({
    data: [],

});

const data = ref<number[]>([])
const SelectList = ref<IAddCustomerModel[]>([])
const queryLu = () => {
    AllCustomerApi().then((res) => {
        console.log(res);
        if (res.code === 200) {
            queryLuList.data = res.data
            SelectList.value = res.data.map((item: any) => ({
                nickName: item.nickName,
                id: item.userId
            }))
            console.log(SelectList);

        }
    })
}
//查询关键字
queryLu();

//导出
const exportFn = () => {
    ExportApi(
        {
            pageNum: 1,
            pageSize: 10,
        },
        {
            //导出文件的请求需要额外配置
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            responseType: "blob",
        }
    ).then((res) => {
        if (!res) return;
        console.log(res, "88888888888");
        saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([res as any]),
            //设置导出文件名称
            `客户档案_${new Date().getTime()}.xlsx`);
    })



}
</script>

<style lang="less" scoped>
.btn1 {
    width: 80px;
}

.box1 {
    display: flex;
    width: 100%;
    margin-bottom: 20px;

    :deep(.el-input) {
        height: 35px;
        width: 200px;
    }


    :deep(.el-range-editor.el-input__wrapper) {
        width: 250px;
    }

    :deep(.el-input--suffix) {
        width: 200px;
    }

    .btn {
        margin-left: 10px;
        width: 80px;
    }

    p {
        width: 100px;
        font-weight: 600;
        height: 35px;
        line-height: 35px;
        color: #666;
    }
}

.box2 {
    float: left;
    margin-bottom: 20px;
}

.page {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}

// :deep(.align),
// :deep(.cell) {
//     text-align: center;
// }

:deep(.el-table__cell) {
    text-align: center !important;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>